<template>
  <div class="mediaContainer">
    <div class="left-contain">
      <div class="top-operation">
        <div style="display:flex;align-items:center;" class="flex-1">
          <el-button
            icon="el-icon-back"
            size="medium"
            type="text"
            @click="goBack"
            >返回
          </el-button>
          <div class="ziliao-name" style="margin-left: 15px;font-weight: bold;" v-if="mediaInfo">
            {{ mediaInfo.mediaName }}
          </div>
        </div>
        <div>
          <div>
            <!-- <auth-btn
              btn-id="btn_detail_download"
              type="primary"
              plain
              style="margin-right:1rem"
              icon="el-icon-document"
              :loading="loading"
              @click="clickCopy(mediaInfo)"
              v-if="entry === 'public'"
              >复制链接</auth-btn
            > -->
            <el-dropdown style="margin-right: 10px;" trigger="click" v-if="mediaInfo && mediaInfo.mediaType == 'v'" @command='changeResolution'>
              <el-button>
                {{ currentResolution }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in downloadList" :key="index" :command='item'>
                  {{ item.templateName }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button style="margin-right: 10px;" @click="fullscreen" type="primary" plain v-if="mediaInfo && mediaInfo.mediaType === 'v' ">全屏</el-button>
            <el-button v-if="entry == 'public'" icon="el-icon-share" @click="copyMediaId" plain>复制媒资ID</el-button>
            <auth-btn
              btn-id="btn_detail_download"
              v-if="!isCheck"
              type="primary"
              icon="el-icon-download"
              :loading="loading"
              @click="download(mediaInfo)"
              >下载文件</auth-btn
            >
            <template v-if="isCheck">
              <auth-btn
                btn-id="btn_reject"
                type="danger"
                plain
                @click="rejectDialog"
                >驳 回</auth-btn
              >
              <auth-btn btn-id="btn_pass" type="primary" @click="editMedia"
                >通 过</auth-btn
              >
            </template>
          </div>
        </div>
      </div>
      <div v-if="entry == 'check' && data && data.flowStatus && reason" style="font-size: 13px;">
        <template v-if="data.flowStatus == 3">
          <span style="margin-left: 10px;">审批状态：</span>
          <span style="color: #f90000;">{{ data.flowStatus | dictLabel('media_flow_status') }}</span>
          <span style="margin-left: 30px;">审批时间：{{ reason.processTime }}</span>
          <span style="margin-left: 30px;">审批人：{{ reason.userName }}</span>
          <div style="margin-top: 10px;">
            <span style="margin-left: 10px;">驳回原因：{{ reason.msg }}</span>
          </div>
        </template>
        <template v-else-if="data.flowStatus == 2">
          <span style="margin-left: 10px;">审批状态：</span>
          <span style="color: #05b130;">{{ data.flowStatus | dictLabel('media_flow_status') }}</span>
          <span style="margin-left: 30px;">审批时间：{{ reason.processTime }}</span>
          <span style="margin-left: 30px;">审批人：{{ reason.userName }}</span>
        </template>
        <template v-else-if="data.flowStatus == 1">
          <span style="margin-left: 10px;">审批状态：</span>
          <span style="color: #dc9408;">{{ data.flowStatus | dictLabel('media_flow_status') }}</span>
        </template>
      </div>
      <div class="content" v-if="mediaInfo">
        <div class="ziliao" :style="mediaInfo.mediaType === 'd' ? 'height: 100%' : ''">
          <div class="player" style="position: relative;overflow: hidden;" id="player" @fullscreenchange='fullscreenchange'>
            <div class="exitFullscreen" @click="exitFullscreen" v-if="isFullscreen"><i class="el-icon-full-screen" style="margin-right: 5px"></i>退出全屏 </div>
            <div v-if="videoWatermark.type==='text'" :style="videoWatermark.style">
                  {{videoWatermark.content}}
            </div>
            <img :src='videoWatermark.content' v-if="videoWatermark.type==='img'" :style="videoWatermark.style"/>
            <div style="position: absolute;top: 0;right: 0;z-index: 999;background: rgba(0,0,0,0.5);color: white;cursor: pointer;font-size: 13px;padding: 10px;">
              <div @click="favClick"><i :class="isFav ? 'el-icon-star-on' : 'el-icon-star-off'" style="margin-right: 5px;color: #f7ba2a;"></i>{{ isFav ? '取消收藏' : '收藏'}}</div>
            </div>
            <file-show
              ref="fileShow"
              :media-type="mediaInfo.mediaType"
              :play-path="mediaInfo.playPath"
              :poster-path="mediaInfo.posterPath"
              @videoCanPlay="videoCanPlay"
              @videoCurrent="videoCurrentChange"
              @playing='onPlaying'
            ></file-show>
          </div>
        </div>
        <div class="ziliao-detail">
          <VideoTimeline
            v-if="currentMenuIndex == 2 && recoMenu == 'reco' && videoDuration > 0"
            style="margin-top: 15px;align-items: center;"
            :result="currentAuditResult"
            :current="videoCurrent"
            :duration="videoDuration"
            @progressClick="videoProgressClick"
            @blockClick="videoBlockClick"
          ></VideoTimeline>
          <VideoCut
            v-if="currentMenuIndex == 4 && videoDuration > 0"
            style="margin-top: 15px;align-items: center;"
            :current="videoCurrent"
            :duration="videoDuration"
            @progressClick="videoProgressClick"
            @blockClick="videoBlockClick"
            @cutOut="videoCutOut"
            @preview="videoCutPreview"
            @save="videoCutSave"
          ></VideoCut>
          <div v-if="currentMenuIndex == 2 && recoMenu == 'audio'" style="padding: 10px;height: 100%;overflow-y: auto;">
            <div v-for="(item, index) in AudioResult" :key="index">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-contain" style="display:flex">
      <div class="left-menu">
        <div class="menu-item" :style="{ backgroundColor : currentMenuIndex == index ? '#ECF2FE' : '' }"
          v-for="(item,index) in menuTabs"
          :key="index"
          @click="changeMenu(index)"
        >
          <svg-icon :icon-class="item.icon"
            style="width: 30px;height: 30px"
            :style="{ fill : currentMenuIndex == index ? '#4986F5' : '#BEC0C5' }"></svg-icon>
          <span style="margin-top: 5px;"
            :style="{ color : currentMenuIndex == index ? '#4986F5' : '#2D2D2D'}">{{ item.title }}</span>
        </div>
      </div>
      <div class="right-content" style="width: 380px;padding: 10px;overflow: overlay">
        <div v-show="currentMenuIndex == 0">
          <div style="margin-left: 10px">
            <Description
              v-if="mediaInfo"
              :type="mediaInfo.mediaType"
              :data="mediaInfo"
              :isEdit="isEdit"
              :entry="entry"
              @rename="renameSuccess"
            ></Description>
            <el-empty v-else :image-size="200"></el-empty>
          </div>
        </div>
        <div v-show="currentMenuIndex == 1">
          <h3 style="margin-left: 10px;">资源编目</h3>
          <div style="margin-left: 10px">
            <description-bian-mu
              v-if="mediaInfo"
              :data="mediaInfo"
              :isEdit="isEdit"
            ></description-bian-mu>
            <el-empty v-else :image-size="200"></el-empty>
          </div>
        </div>
        <div v-show="currentMenuIndex == 2" style="position: relative;">
          <el-button style="position: absolute;top: 0;right: 0;margin-right: 10px;z-index: 999;" v-if="isEdit" icon="el-icon-refresh" type="text" @click="aiRecheck">AI复审</el-button>
          <el-tabs v-model="recoMenu">
            <el-tab-pane label="智能识别" name="reco" v-if="mediaInfo && mediaInfo.mediaType != 'a'">
              <div class="categoryLabels" style="">
                <div v-for="(item, index) in SmartCategorys" :key="index" class="categoryLabel" :class="recoCatIndex == index ? 'focus' : ''" @click="recoCatClick(index)">
                  {{ `${item.categoryName}(${item.errCount})`}}
                </div>
              </div>
              <el-button v-if="isEdit" @click="addSmartErr" style="width: calc(100% - 20px);margin: 0 10px;" icon="el-icon-plus">新增</el-button>
              <VideoResultList
                v-if="SmartResultFilter.length > 0"
                :isEdit="isEdit"
                :list="SmartResultFilter"
                @itemClick="catalogClick"
                @resultClick="videoBlockClick"
                @ignore="ignoreSmart"
              ></VideoResultList>
              <el-empty v-else :image-size="200"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="OCR识别" name="ocr" v-if="mediaInfo && mediaInfo.mediaType != 'a'">
              <div class="categoryLabels" style="">
                <div v-for="(item, index) in OcrCategorys" :key="index" class="categoryLabel" :class="ocrCatIndex == index ? 'focus' : ''" @click="ocrCatClick(index)">
                  {{ `${item.categoryName}(${item.errCount})`}}
                </div>
              </div>
              <el-button v-if="isEdit" @click="addNewOcr" style="width: calc(100% - 20px);margin: 0 10px;" icon="el-icon-plus">新增</el-button>
              <TextResultList
                v-if="OcrResultFilter.length > 0"
                :list="OcrResultFilter"
                :isEdit="isEdit"
                @itemClick="videoBlockClick"
                @ignore="ignoreOcr"
                @replace="replaceOcr"
                @addError="addErrorOcr"
                @copy="copyEvent"
              ></TextResultList>
              <el-empty v-else :image-size="200"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="音频识别" name="audio" v-if="mediaInfo && (mediaInfo.mediaType == 'v' || mediaInfo.mediaType == 'a')">
              <div class="categoryLabels" style="">
                <div v-for="(item, index) in AudioCategorys" :key="index" class="categoryLabel" :class="audioCatIndex == index ? 'focus' : ''" @click="audioCatClick(index)">
                  {{ `${item.categoryName}(${item.errCount})`}}
                </div>
              </div>
              <TextResultList
                v-if="AudioResultFilter.length > 0"
                :list="AudioResultFilter"
                :show-image="false"
                :isEdit="isEdit"
                @itemClick="videoBlockClick"
                @ignore="ignoreAudio"
                @replace="replaceAudio"
                @addError="addErrorAudio"
                @copy="copyEvent"
              ></TextResultList>
              <el-empty v-else :image-size="200"></el-empty>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-show="currentMenuIndex == 3">
          <h3 style="margin-left: 10px;">资源标签</h3>
          <el-button v-if="isEdit" @click="handleCategoryAdd" style="width: calc(100% - 20px);margin: 0 10px;" icon="el-icon-plus">新增标签分类</el-button>
          <el-collapse v-model="activeNames" v-if="words.length > 0">
            <el-collapse-item :title="item.categoryName" :name="index" v-for="(item, index) in words" :key="index">
              <el-tag
                size="small"
                v-for="(tag, index) in item.tags"
                :key="index"
                :closable="isEdit"
                @close="handleTagClose(tag)"
                >{{ tag }}</el-tag
              >
              <div style="textAlign:center" v-if="!isEdit&&!item.tags.length">暂无数据</div>
              <el-button
                v-if="isEdit"
                size="mini"
                btn-id="btn_tag"
                icon="el-icon-plus"
                @click="handleTagAdd(item.categoryName)"
                plain
                >添加</el-button>
            </el-collapse-item>
          </el-collapse>
          <el-empty v-else :image-size="200"></el-empty>
        </div>
        <div v-show="currentMenuIndex == 4">
          <h3 style="margin-left: 10px;">打点记录</h3>
          <div class="shotContainer" v-if="shotTime.length > 0">
            <div v-for="(item,index) in shotTime" :key="index" class="result">
              <img :src="filePath + item.posterPath" class="resultImg" />
              <div class="resultText">
                <div style="font-weight:bold;margin-bottom:10px;word-break: break-all;line-break: anywhere;">{{ item.shotName }}</div>
                <div>
                  {{ item.startTime.slice(0, 8) }} ~
                  {{ item.endTime.slice(0, 8) }}
                </div>
                <div style="width: 100%; display: flex; align-items: center;margin-top:5px">
                  <div style="color: #4986f5; cursor: pointer; margin-right: 7px" @click="downloadShot(item)">下载</div>
                  <div style="color: #4986f5; cursor: pointer; margin-right: 7px" @click="showMove(item)">保存至</div>
                  <div style="color: #4986f5; cursor: pointer; margin-right: 7px" @click="renameShot(item)">重命名</div>
                  <div style="color: red; cursor: pointer" @click="deleteShot(item)">删除</div>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else :image-size="200"></el-empty>
        </div>
      </div>
    </div>
    <el-dialog title="驳回原因" :visible.sync="dialogVisible" width="30%">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入驳回原因"
        maxlength="500"
        v-model="rejectReason"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="reject">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审批流程 -->
    <el-dialog title="审批流程" :visible.sync="dialogProcess" width="60%">
      <ApprovalProcess :processList="dialogProcessList"></ApprovalProcess>
    </el-dialog>
    <move ref="move" @videoSelectTarget="saveShot"></move>
    <AddTextMark ref="addTextMark" @success="addTextMarkCallback"></AddTextMark>
    <AddSmartMark ref="addSmartMark" @success="addSmartMarkCallback"></AddSmartMark>
    <file-download ref="fileDownload"></file-download>
  </div>
</template>
<script>
import FormItemGroup from '@/components/FormItemGroup/index';
import FileShow from '@/components/FileShow';
import Description from './DescriptionVideo';
import AuthBtn from '@/components/AuthBtn';
import DescriptionBianMu from './DescriptionBianMu.vue';
import Move from '@/views/material-library/personal/components/Move.vue';
import {
  detail as localDetail,
  getLabel as localLabel,
  download as localDownload,
  saveLabel as localSaveLabel,
  deleteLabel as localDeleteLabel,
  saveCategory as localSaveCategory,
} from '@/api/serve/media-local';
import {
  detail as teamDetail,
  getLabel as teamLabel,
  download as teamDownload,
  saveLabel as teamSaveLabel,
  deleteLabel as teamDeleteLabel,
  saveCategory as teamSaveCategory,
} from '@/api/serve/media-team';
import {
  detail as publicDetail,
  getLabel as publicLabel,
  download as publicDownload,
} from '@/api/serve/media-public';
import {
  reject,
  pass,
  detail as flowDetail,
  getLabel as flowLabel,
  rejectReason as flowReason,
  download as flowDownload,
  getPassDetail,
  saveLabel as flowSaveLabel,
  deleteLabel as flowDeleteLabel,
  saveCategory as flowSaveCategory,
} from '@/api/serve/media-flow';
import {
  detail as centerDetail,
  getLabel as centerLabel,
  download as centerDownload,
} from '@/api/serve/media-center';
import {
  detail as searchDetail,
  getLabel as searchLabel,
  download as searchDownload,
} from '@/api/serve/media-search';
import { processList } from '@/api/approval-process/index.js';
import ApprovalProcess from '@/components/ApprovalProcess';
import Download from '@/views/_mixins/download';
import AddTextMark from './AddTextMark.vue';
import AddSmartMark from './AddSmartMark.vue';

import { getSmartList, getShotTimeList, addShotTime, saveShotTime, getOcrList, getAudioList,
  deleteSmartErr, deleteOcrErr, deleteAudioErr, replaceOcrErr, replaceAudioErr, review, renameShotTime, deleteShotTime
  } from '@/api/serve/media-ai.js';
import { timeToSeconds, secondsToTimeFormat} from '@/utils';
import { getMediaFavState, add as addFav, cancelFav } from '@/api/person-info-setting/info-collect.js'
import FileDownload from '@/views/material-library/file-download';
import { downLoadList } from "@/api/serve/media-transcode";
import { getDefaultWatermark } from '@/api/system-config/videoWatermark.js'
// import { basePath } from "@/utils/request";
export default {
  name: 'itemDetail',
  mixins: [Download],
  components: {
    FileShow,
    FormItemGroup,
    AuthBtn,
    ApprovalProcess,
    DescriptionBianMu,
    Move,
    Description,
    AddTextMark,
    AddSmartMark,
    FileDownload,
  },
  props: {
    data: {
      type: Object,
    },
    entry: {
      type: String,
      default: 'search'
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
    processId: {
      type: String,
      required: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    data: {
      handler(nv) {
        if (nv) {
          this.initFuc(nv);
        }
      },
      immediate: true,
    },
    SmartResultFilter(nv) {
      if (nv && nv.length > 0) {
        this.catalogClick(this.SmartResultFilter[0]);
      }
    },
  },
  data() {
    return {
      filePath: filePath,
      mediaId: '',
      activeName: 'first',
      words: [],
      mediaInfo: null,
      imgSrc: '',
      dialogVisible: false,
      rejectReason: '',
      reason: null,
      loading: false,
      dialogProcess: false,
      dialogProcessList: [],
      menuTabs :[
        {
          title: '资源信息',
          icon: 'file-info'
        },
        {
          title: '资源编目',
          icon: 'file-index'
        },
        {
          title: '智能识别',
          icon: 'file-reco'
        },
        {
          title: '资源标签',
          icon: 'file-tag'
        },
        {
          title: '打点记录',
          icon: 'file-cut'
        },
      ],
      currentMenuIndex: 0,
      recoMenu: 'reco',
      SmartResult: [],
      AudioResult: [],
      OcrResult: [],
      SmartCategorys: [],
      AudioCategorys: [],
      OcrCategorys: [],
      videoDuration: 0,
      videoCurrent: 0,
      videoSize: null,
      activeNames: [],
      currentAuditResult: null,
      shotTime: [],
      saveShotId: '',
      isFav: false,
      downloadList: [],
      currentResolution: '',
      videoWatermark:{
        type:'',
        style:''
      },
      isFullscreen:false,
      recoCatIndex: 0,
      ocrCatIndex: 0,
      audioCatIndex: 0,
    };
  },
  computed: {
    SmartResultFilter() {
      if(this.recoCatIndex == 0) {
        return this.SmartResult;
      }
      return this.SmartResult.filter(item => item.categoryId == this.SmartCategorys[this.recoCatIndex].categoryId);
    },
    OcrResultFilter() {
      if(this.ocrCatIndex == 0) {
        return this.OcrResult;
      }
      return this.OcrResult.filter(item => {
        let index = item.errList.findIndex(err => err.categoryId == this.OcrCategorys[this.ocrCatIndex].categoryId);
        return index >= 0;
      });
    },
    AudioResultFilter() {
      if(this.audioCatIndex == 0) {
        return this.AudioResult;
      }
      return this.AudioResult.filter(item => {
        let index = item.errList.findIndex(err => err.categoryId == this.AudioCategorys[this.audioCatIndex].categoryId);
        return index >= 0;
      });
    },
  },
  created() {
    let mediaId = this.$route.query.mediaId;
    if(mediaId) {
      this.initFucByMediaId(mediaId);
    }
  },
  methods: {
    fullscreen(){
      const element= document.getElementById("player").requestFullscreen()
      if (element.requestFullscreen) {
        result=element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        result= element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        result= element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        result= element.msRequestFullscreen();
      }
    },
    fullscreenchange(){
      if (document.fullscreen) {
        this.calcWatermark(window.innerWidth,window.innerHeight)
        this.isFullscreen = true
      } else {
        this.calcWatermark(this.$playerW,this.$playerH)
        this.isFullscreen = false
      }
    },
    exitFullscreen(){
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
    },
    initFucByMediaId(mediaId){
      this.mediaInfo = null;
      this.words = [];
      this.activeName = 'first';
      // this.initFormData();

      this.mediaId = mediaId;
      // this.posterPath = data.posterPath;
      //水印
      this.videoWatermark={
        type:'',
        style:'',
      }
      this.getMediaDetail(this.mediaId);
      this.getLabel();
    },
    initFuc(data) {
      this.initFucByMediaId(data.mediaId);
    },
    rejectDialog() {
      this.rejectReason = '';
      this.dialogVisible = true;
    },
    cancle() {
      this.rejectReason = '';
      this.dialogVisible = false;
    },
    reject() {
      if(!this.rejectReason) {
        this.$message.error('请输入驳回原因！');
        return;
      }
      let data = {
        mediaProcessId: this.processId,
        reason: this.rejectReason,
      };
      reject(this.mediaId, data)
        .then((res) => {
          if (res.data) {
            this.$message.success('提交成功');
          } else {
            this.$message.error('提交失败');
          }
        })
        .catch((error) => {
        })
        .finally(() => {
          this.dialogVisible = false;
          this.goBack();
        });
    },
    editMedia() {
      let data = {
        mediaProcessId: this.processId,
      };
      pass(this.mediaId, data)
        .then((res) => {
          if (res.data) {
            this.$message.success('提交成功');
          } else {
            this.$message.error('提交失败');
          }
        })
        .catch((error) => {
        })
        .finally(() => {
          this.dialogVisible = false;
          this.goBack();
        });
    },
    async download(mediaInfo) {
      if(this.mediaInfo.mediaType == 'v' || this.mediaInfo.mediaType == 'a') {
        const loaded = await this.selectDownload();
        if(loaded) return;
      }
      this.loading = true;
      let that = this;
      that.$message('正在下载中...');
      let inter = setInterval(() => {
        that.$message('正在下载中...');
      }, 2000);
      if (this.entry === 'team') {
        teamDownload(mediaInfo.mediaId).then((res) => {
          this.downloadFile(res.data[0], mediaInfo.mediaName, inter);
        });
      }
      if (this.entry === 'local') {
        localDownload(mediaInfo.mediaId).then((res) => {
          this.downloadFile(res.data[0], mediaInfo.mediaName, inter);
        });
      }
      if (this.entry === 'public') {
        publicDownload(mediaInfo.mediaId).then((res) => {
          this.downloadFile(res.data[0], mediaInfo.mediaName, inter);
        });
      }
      if (this.entry === 'check') {
        flowDownload(mediaInfo.mediaId).then((res) => {
          this.downloadFile(res.data, mediaInfo.mediaName, inter);
        });
      }
      if (this.entry === 'center') {
        centerDownload(mediaInfo.mediaId).then((res) => {
          this.downloadFile(res.data, mediaInfo.mediaName, inter);
        });
      }
      if (this.entry === 'search') {
        searchDownload(mediaInfo.mediaId).then((res) => {
          this.downloadFile(res.data, mediaInfo.mediaName, inter);
        });
      }
    },
    //获取标签
    async getLabel() {
      let res = null;
      if (this.entry === 'team') {
        res = await teamLabel(this.mediaId);
      }
      if (this.entry === 'local') {
        res = await localLabel(this.mediaId);
      }
      if (this.entry === 'public') {
        res = await publicLabel(this.mediaId);
      }
      if (this.entry === 'check') {
        res = await flowLabel(this.mediaId);
      }
      if (this.entry === 'center') {
        res = await centerLabel(this.mediaId);
      }
      if (this.entry === 'search') {
        res = await searchLabel(this.mediaId);
      }
      this.words = res;
      this.activeNames = res.map((_item, index) => {
        return index;
      })
    },
    async getMediaDetail(mediaId) {
      let res = null;
      if (this.entry === 'team') {
        res = await teamDetail(mediaId);
      }
      if (this.entry === 'local') {
        res = await localDetail(mediaId);
      }
      if (this.entry === 'public') {
        res = await publicDetail(mediaId);
      }
      if (this.entry === 'check') {
        res = await flowDetail(mediaId);
      }
      if (this.entry === 'center') {
        res = await centerDetail(mediaId);
      }
      if (this.entry === 'search') {
        res = await searchDetail(mediaId);
      }
      this.mediaInfo = res;
      if(this.mediaInfo.flowStatus == 3) {
        flowReason(this.mediaId).then((res) => {
          this.reason = res.data;
        });
      } else if(this.mediaInfo.flowStatus == 2 || this.mediaInfo.flowStatus == 1) {
        getPassDetail(this.mediaId).then((res) => {
          this.reason = res.data;
          this.reason['processTime'] = res.data.pointTime;
        })
      }
      this.currentResolution = '原始文件';
      downLoadList(this.mediaInfo.fileId).then((res) => {
        this.downloadList = res;
        this.downloadList.unshift({
          templateName: '原始文件',
          targetPath: this.mediaInfo.playPath,
        });
      });
      if(this.mediaInfo.mediaType != 'v') {
        this.menuTabs= [
          {
            title: '资源信息',
            icon: 'file-info'
          },
          {
            title: '资源编目',
            icon: 'file-index'
          },
          {
            title: '智能识别',
            icon: 'file-reco'
          },
          {
            title: '资源标签',
            icon: 'file-tag'
          },
        ];
      } else {
        this.menuTabs= [
          {
            title: '资源信息',
            icon: 'file-info'
          },
          {
            title: '资源编目',
            icon: 'file-index'
          },
          {
            title: '智能识别',
            icon: 'file-reco'
          },
          {
            title: '资源标签',
            icon: 'file-tag'
          },
          {
            title: '打点记录',
            icon: 'file-cut'
          },
        ];
      }
      if(this.mediaInfo.mediaType == 'a') {
        this.recoMenu = "audio";
      }
      this.getSmartTab();
      this.getOcrTab();
      this.getAudioTab();
      getShotTimeList(this.mediaInfo.fileId).then((res) => {
        this.shotTime = res;
      });
      getMediaFavState(this.mediaId).then((res) => {
        this.isFav = Boolean(res.data);
      });
    },
    getSmartTab() {
      const fileId = this.mediaInfo.fileId;
      getSmartList(fileId).then((res) => {
        this.SmartResult = res.resList.map((item) => {
          item['name'] = item.categoryName;
          item['id'] = item.categoryId;
          item['items'] = item.resList.map((err) => {
            return {
              name: err.imageDescribe,
              startTime: err.startTime ? timeToSeconds(err.startTime) : null,
              endTime: err.endTime ? timeToSeconds(err.endTime) : null,
              score: err.imageConfidence,
              imgUrl: this.filePath + err.imagePath,
              isIgnore: err.isIgnore,
              smartId: err.smartId,
              filePage: err.occurPage,
            }
          });
          return item;
        });
        let sum = res.errCategoryList.reduce(function(prev, curr, idx, arr){
          return prev + curr.errCount;
        }, 0);
        res.errCategoryList.unshift({ categoryName: '全部', errCount: sum});
        this.SmartCategorys = res.errCategoryList;
        if(this.SmartResult.length > 0) {
          this.catalogClick(this.SmartResult[0]);
        } else {
          this.currentAuditResult = null;
        }
      });
    },
    getOcrTab() {
      const fileId = this.mediaInfo.fileId;
      getOcrList(fileId).then((res) => {
        this.OcrResult = res.resList.map((item) => {
          item['id'] = item.ocrId;
          item['content'] = item.ocrText;
          item['imageUrl'] = this.filePath + item.imgPath;
          item['startTime'] = this.mediaInfo.mediaType == 'v' ? item.videoSec : null;
          item['errs'] = item.errList.map((err) => {
            return {
              id: err.errId,
              type: err.categoryName,
              subtype: err.categorySecondName,
              text: err.errContent,
              correct: err.rightContent,
              startMeta: {
                parentTagName: 'P',
                parentIndex: 0,
                textOffset: err.startPos
              },
              endMeta: {
                parentTagName: 'P',
                parentIndex: 0,
                textOffset: err.endPos
              }
            }
          });
          return item;
        });
        let sum = res.errCategoryList.reduce(function(prev, curr, idx, arr){
          return prev + curr.errCount;
        }, 0);
        res.errCategoryList.unshift({ categoryName: '全部', errCount: sum});
        this.OcrCategorys = res.errCategoryList;
      });
    },
    getAudioTab() {
      const fileId = this.mediaInfo.fileId;
      getAudioList(fileId).then((res) => {
        this.AudioResult = res.resList.map((item) => {
          item['id'] = item.audioId;
          item['content'] = item.audioText;
          item.startTime = timeToSeconds(item.startTime);
          item.endTime = timeToSeconds(item.endTime);
          item['errs'] = item.errList.map((err) => {
            return {
              id: err.errId,
              type: err.categoryName,
              subtype: err.categorySecondName,
              text: err.errContent,
              correct: err.rightContent,
              startMeta: {
                parentTagName: 'P',
                parentIndex: 0,
                textOffset: err.startPos
              },
              endMeta: {
                parentTagName: 'P',
                parentIndex: 0,
                textOffset: err.endPos
              }
            }
          });
          return item;
        });
        let sum = res.errCategoryList.reduce(function(prev, curr, idx, arr){
          return prev + curr.errCount;
        }, 0);
        res.errCategoryList.unshift({ categoryName: '全部', errCount: sum});
        this.AudioCategorys = res.errCategoryList;
      });
    },
    goBack() {
      if (this.entry === 'search') {
        this.$router.go(-1);
      } else {
        this.$parent.pButton2(0);
      }
    },
    /**
     * 初始化表单数据
     * */
    initFormData() {
      this.formData = {
        mediaName: '',
        mediaAlias: '',
        organId: '',
        catalogName: '',
        mediaFigure: '',
        completeTime: '',
        mediaDes: '',
      };
    },

    // 获取审批流程
    getProcess() {
      processList(this.mediaId).then((res) => {
        this.dialogProcess = true;
        this.dialogProcessList = res.data;
      });
    },
    changeMenu(index) {
      this.currentMenuIndex = index;
    },
    calcWatermark(w,h){
      const data =this.$watermarkData
      let scale =data.previewW /w
      let Yscale =data.previewH /h
      if(data.watermarkType==='p'){
        this.videoWatermark={
          type:'img',
          style:{
            width:data.picW /scale +'px',
            height:data.picH /scale +'px',
            left:data.watermarkX/scale +'px',
            top:data.watermarkY/Yscale+'px',
            position:'absolute',
            zIndex: 999
          },
          content:filePath+data.picPath
        }
        }else if(data.watermarkType==='t'){
          this.videoWatermark={
          type:'text',
          style:{
            fontSize:data.textSize +'px',
            fontFamily: { 微软雅黑: "Microsoft YaHei", 宋体: "宋体" }[data.textFont],
            color: data.textColor,
            opacity: data.textAlpha,
            left:data.watermarkX/scale +'px',
            top:data.watermarkY/Yscale+'px',
            position:'absolute',
            width:data.picW /scale +'px',
            height:data.picH /scale +'px',
            zIndex: 999,
            lineHeight:1
          },
          content:data.textContent
        }
        }
    },
    videoCanPlay(duration, size) {
      this.videoDuration = duration;
      this.videoSize = size;
      console.log(size)
      //水印
      this.videoWatermark={
        type:'',
        style:'',
      }
      this.$playerW =size.divWidth
      this.$playerH =size.divHeight
      getDefaultWatermark().then(data=>{
        this.$watermarkData =data
        this.calcWatermark(this.$playerW ,this.$playerH)
      }).catch(e=>console.log(e))
    },
    videoCurrentChange(current) {
      this.videoCurrent = current;
    },
    videoProgressClick(jump) {
      this.$refs.fileShow.$refs.videoPlay.$refs.veo.currentTime = ( jump * this.videoDuration ) / 600;
    },
    videoBlockClick(block) {
      if(this.mediaInfo.mediaType === 'v') {
        this.$refs.fileShow.$refs.videoPlay.$refs.veo.currentTime = block.startTime;
        this.$refs.fileShow.$refs.videoPlay.$refs.veo.pause();
      } else if(this.mediaInfo.mediaType === 'a') {
        this.$refs.fileShow.$refs.audioRef.currentTime = block.startTime;
      } else if(this.mediaInfo.mediaType === 'd') {
        this.$refs.fileShow.$refs.PDF.toPage(block.filePage);
      }
    },
    catalogClick(catalog){
      let destResult = { name: catalog.name, items: [] };
      catalog.items.forEach(element => {
        let exist = destResult.items.find(item => item.name == element.name);
        if (exist) {
          exist.items.push({
            startTime: element.startTime,
            endTime: element.endTime
          });
        } else {
          destResult.items.push({
            name: element.name,
            items: [
              {
                startTime: element.startTime,
                endTime: element.endTime
              }
            ]
          });
        }
      });
      this.currentAuditResult = destResult;
    },
    downloadShot(item) {
      let that = this;
      that.$message('正在下载中...');
      let inter = setInterval(() => {
        that.$message('正在下载中...');
      }, 4000);
      that.downloadFile(item.targetPath, item.shotName, inter);
    },
    showMove(item) {
      this.saveShotId = item.targetId;
      this.$refs.move.show('add', this.mediaInfo, 'videoShot');
    },
    saveShot(catalogId) {
      saveShotTime(this.saveShotId, catalogId).then(() => {
        this.$message.success('提交成功');
      });
    },
    videoCutOut() {
      this.$refs.fileShow.$refs.videoPlay.$refs.veo.pause();
    },
    videoCutPreview(clip) {
      console.log(clip);
      this.$refs.fileShow.$refs.videoPlay.$refs.veo.currentTime = clip.startTime;
      this.$refs.fileShow.$refs.videoPlay.$refs.veo.play();
      this.$clip =clip
    },
    onPlaying(){
      clearTimeout(this.$previewTimer)
      if(!this.$clip) return
      const clip =this.$clip
      this.$previewTimer = setTimeout(()=>{
      this.$refs.fileShow.$refs.videoPlay.$refs.veo.pause();
      this.$clip =null
      },clip.endTime*1000-clip.startTime*1000)
    },
    videoCutSave(clip) {
      this.$prompt('', '输入片段名称',  {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S{1,30}$/,
        inputErrorMessage: '长度在1到30之间',
        beforeClose: (action, instance, done) => {
          if(action === 'cancel') {
            done();
            return;
          }
          if(!instance.inputValue) {
            this.$message.error('名称不能为空！');
            return;
          }
          let params = {
            startTime: secondsToTimeFormat(clip.startTime),
            endTime: secondsToTimeFormat(clip.endTime),
            shotName: instance.inputValue
          };
          const loading = this.$loading({
            lock: true,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          });
          addShotTime(this.mediaInfo.fileId, params).then(async (res) => {
            this.$message.success('添加成功！');
            this.shotTime = await getShotTimeList(this.mediaInfo.fileId);
            done();
          }).finally(() => {
            loading.close();
          });
        },
      }).then(() => {}).catch(() => {});
    },
    async ignoreSmart(item) {
      await deleteSmartErr(item.smartId);
      this.SmartResult.forEach(result => {
        let index = result.items.findIndex(err => err.smartId == item.smartId);
        if (index >= 0) {
          result.items[index].isIgnore = 1;
          this.$message.success('操作成功');
        }
      });
    },
    async ignoreOcr(itemId, errId) {
      await deleteOcrErr(errId);
      this.errCallback('ocr', itemId, errId);
    },
    async ignoreAudio(itemId, errId) {
      await deleteAudioErr(errId);
      this.errCallback('audio', itemId, errId);
    },
    async replaceOcr(itemId, errId) {
      let res = await replaceOcrErr(itemId, errId);
      this.errCallback('ocr', itemId, errId, res);
    },
    async replaceAudio(itemId, errId) {
      let res = await replaceAudioErr(itemId, errId);
      this.errCallback('audio', itemId, errId, res);
    },
    errCallback(type, itemId, errId, content) {
      let list = type == 'ocr' ? this.OcrResult : this.AudioResult;
      let categorys = type == 'ocr' ? this.OcrCategorys : this.AudioCategorys;
      let result = list.find(result => result.id == itemId);
      let errIndex = result.errs.findIndex(err => err.id == errId);
      let categoryName = result.errs[errIndex].type;
      result.errs.splice(errIndex, 1);
      if(content) {
        result.content = content;
      }
      categorys.find(category => category.categoryName == categoryName).errCount--;
      categorys.find(category => category.categoryName == '全部').errCount--;
      this.$message.success('操作成功');
    },
    addErrorOcr(result) {
      this.$refs.addTextMark.show('ocr', result, this.mediaInfo);
    },
    addErrorAudio(result) {
      this.$refs.addTextMark.show('audio', result, this.mediaInfo);
    },
    addTextMarkCallback(type) {
      if(type == 'ocr') {
        this.getOcrTab();
      }
      if(type == 'audio') {
        this.getAudioTab();
      }
    },
    addSmartErr() {
      this.$refs.addSmartMark.show(this.mediaInfo);
    },
    addNewOcr() {
      this.$refs.addSmartMark.show(this.mediaInfo, true);
    },
    addSmartMarkCallback() {
      this.getSmartTab();
      this.getOcrTab();
    },
    async handleTagClose(tag) {
      if (this.entry === 'team') {
        await teamDeleteLabel(this.mediaId, tag);
      }
      if (this.entry === 'local') {
        await localDeleteLabel(this.mediaId, tag);
      }
      if (this.entry === 'check') {
        await flowDeleteLabel(this.mediaId, tag);
      }
      this.getLabel();
    },
    async handleTagAdd(catalogName) {
      this.$prompt('', '添加标签',  {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S{1,20}$/,
        inputErrorMessage: '必填，长度在1到20之间',
        beforeClose: async (action, instance, done) => {
          if(action === 'cancel') {
            done();
            return;
          }
          let value = instance.inputValue;
          let repeat = false;
          this.words.forEach(cat => {
            if(cat.tags.indexOf(value) >= 0) {
              repeat = true;
              return;
            }
          });
          if(repeat) {
            this.$message.error('标签名称不能重复！');
            return;
          }
          if (this.entry === 'team') {
            await teamSaveLabel(this.mediaId, value, catalogName);
          }
          if (this.entry === 'local') {
            await localSaveLabel(this.mediaId, value, catalogName);
          }
          if (this.entry === 'check') {
            await flowSaveLabel(this.mediaId, value, catalogName);
          }
          this.getLabel();
          done();
        },
      }).then(() => {}).catch(() => {});
    },
    async handleCategoryAdd() {
      this.$prompt('', '添加标签分类',  {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S{1,20}$/,
        inputErrorMessage: '必填，长度在1到20之间',
        beforeClose: async (action, instance, done) => {
          if(action === 'cancel') {
            done();
            return;
          }
          let value = instance.inputValue;
          let repeat = false;
          this.words.forEach(cat => {
            if(cat.categoryName == value) {
              repeat = true;
              return;
            }
          });
          if(repeat) {
            this.$message.error('标签分类名称不能重复！');
            return;
          }
          let newData = {};
          if (this.entry === 'team') {
            newData = await teamSaveCategory(value);
          }
          if (this.entry === 'local') {
            newData = await localSaveCategory(value);
          }
          if (this.entry === 'check') {
            newData = await flowSaveCategory(value);
          }
          //this.getLabel();
          this.words.splice(this.words.length - 1, 0, {
            categoryId: newData.data.categoryId,
            categoryName: newData.data.categoryName,
            tags: []
          });
          done();
        },
      }).then(() => {}).catch(() => {});
    },
    favClick() {
      if(this.isFav) {
        cancelFav(this.mediaId).then(() => {
          this.isFav = false;
        });
      } else {
        addFav({ mediaId: this.mediaId, mediaName: this.mediaInfo.mediaName, mediaType: this.mediaInfo.mediaType }).then(() => {
          this.isFav = true;
        });
      }
    },
    aiRecheck() {
      review(this.mediaInfo.fileId).then(() => {
        this.$message.success('提交成功！');
        this.isEdit = false;
      });
    },
    copyMediaId() {
      navigator.clipboard.writeText(this.mediaId).then(() => {
        this.$message.success('复制成功！');
      });
    },
    selectDownload() {
      return  this.$refs.fileDownload.show('add', this.mediaInfo);
    },
    changeResolution(item) {
      this.mediaInfo.playPath = item.targetPath;
      this.currentResolution = item.templateName;
    },
    copyEvent() {
      this.$message.success('复制成功！');
    },
    renameShot(item) {
      this.$prompt('', '输入片段名称',  {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S{1,30}$/,
        inputErrorMessage: '长度在1到30之间',
        inputValue: item.shotName,
      })
      .then(({ value }) => {
        renameShotTime(item.id, value).then(async () => {
          this.$message.success('修改成功！');
          this.shotTime = await getShotTimeList(this.mediaInfo.fileId);
        });
      })
      .catch(() => {});
    },
    deleteShot(item) {
      this.$confirm('确定删除该片段？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      }).then(() => {
        deleteShotTime(item.id).then(async () => {
          this.$message.success('删除成功！');
          this.shotTime = await getShotTimeList(this.mediaInfo.fileId);
        });
      });
    },
    recoCatClick(index) {
      this.recoCatIndex = index;
    },
    ocrCatClick(index) {
      this.ocrCatIndex = index;
    },
    audioCatClick(index) {
      this.audioCatIndex = index;
    },
    renameSuccess(name) {
      this.mediaInfo.mediaName = name;
    },
  },
};
</script>
<style lang="scss" scoped>
.mediaContainer {
  font-size: 15px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .left-contain {
    width: 960px;
    min-width: 740px;
    height: 100%;
    background: #ffffff;
    // box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .top-operation {
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .content {
      margin-top: 10px;
      // height: calc(100% - 51.5px);
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      .ziliao {
        width: calc( 100% - 20px);
        height: 70%;
        display: flex;
        flex-direction: column;
        .ziliao-title {
          // margin-bottom: 10px;
          // height: 24px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          .ziliao-name {
            font-size: 18px;
            font-family: MicrosoftYaHeiSemibold;
            color: #2d2d2d;
            line-height: 24px;
          }
          .ziliao-data {
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: #8c8c8c;
            line-height: 16px;
            display: flex;
            align-items: center;
          }
        }
        .player {
          width: 100%;
          height: calc(100% - 10px);
        }
      }
      .ziliao-detail {
        width: 100%;
        height: 30%;

        .meizi {
          width: 100%;
          height: 100%;
          display: flex;
          .meizi-left {
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .meizi-pic {
              flex: 1;
            }
          }
          .meizi-center {
            width: 25%;
            height: 100%;
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .meizi-right {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .meizi-content {
              height: calc(100% - 20px);
              // border: 1px dashed #d9d9d9;
              overflow-y: auto;
            }
          }
        }
      }
    }
  }
  .right-contain {
    width: 480px;
    height: 100%;
    margin-left:20px;
    background: #ffffff;
    box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px;

    .left-menu {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 1px solid rgba(0, 0, 0, 0.06);

      .menu-item {
        width: 80px;
        height: 80px;
        margin-top:10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .right-content{
        // padding: 10px;
      }
    }

    .categoryLabels {
      font-size: 13px;
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      margin-right: 10px;

      .categoryLabel {
        border: solid 1px #FFB7B7;
        padding: 6px;
        color: red;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }

      .focus {
        background-color: rgba(255, 0, 0, 0.1);
      }
    }
  }
}
.el-tag {
  margin-right: 16px;
  margin-bottom: 8px;
}
.box-card {
  width: 100%;
  height: 100%;
  .approval-title {
    font-size: 18px;
    font-family: MicrosoftYaHeiSemibold;
    color: #272727;
    line-height: 24px;
  }
  .approval-result {
    font-size: 18px;
    font-family: MicrosoftYaHeiSemibold;
    color: #fc3834;
    line-height: 24px;
  }
  .approval-comments {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #272727;
    line-height: 19px;
  }
  .approval-time {
    font-size: 0.875rem;
    font-family: MicrosoftYaHei;
    color: #272727;
    line-height: 1.1875rem;
    margin-top: 24px;
    display: flex;
    align-items: center;
    .time {
      margin-right: 24px;
    }
  }
}

.shotContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 14px;

  > div {
    margin: 10px;
  }

  .result {
    display: flex;
    border-radius: 6px;
    border: 1px solid #dbdbdb;
    padding: 10px;

    .resultImg {
      height: 80px;
      width: 145px;
      object-fit: contain;
      background-color: black;
    }

    .resultText {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      flex: 1;
      font-size: 12px;
    }
  }
}

::v-deep .el-descriptions-item__label {
  width: 80px;
}
.flex-1{
  flex:1
}
.exitFullscreen{
    position: absolute;
    left: 0;
    top: 0;
    background: #8c8c8c;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    font-size: 13px;
    padding: 10px;
}

::v-deep .resultText {
  justify-content: space-evenly !important;
}
</style>
